<template>
    <div class="container block">
        <div class="postion-top" v-if="tab === 'all'">
            <el-select v-model="approvalIndex" filterable placeholder="选择审批状态" class="screen-i"
                @change="handleCurrentChange">
                <el-option :label="item" :value="index" v-for="(item, index) in approvalList" v-bind:key="index">{{ item
                    }}</el-option>
            </el-select>
            <el-select v-model="deliverPeople" filterable placeholder="筛选提交人" class="screen-i"
                @change="handleCurrentChange">
                <el-option :label="item" :value="item" v-for="(item, index) in screeningPeopleList"
                    v-bind:key="index">{{
                        item }}</el-option>
            </el-select>
            <el-date-picker v-model="payDateSolt" type="daterange" class="date-solt" unlink-panels range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" :shortcuts="shortcuts" @change="onMonth" />
        </div>
        <el-tabs v-model="tab">
            <el-tab-pane label="全部" name="all">
                <div class="header">
                    <div class="detail">
                        <div class="search">
                            <el-select v-model="searchType" filterable placeholder="搜索方式" class="screen-i search-type">
                                <el-option label="搜名称" :value="0" />
                                <el-option label="搜备注" :value="1" />
                            </el-select>
                            <input type="text" :placeholder="searchType
                                ? '请输入发薪备注'
                                : '请输入派遣单位/项目名称'
                                " class="input search-input" v-model="searchText" @keydown.enter="search" />
                            <button class="btn" @click="search">搜索</button>
                            <button class="btn-white" @click="onReset">
                                重置
                            </button>
                        </div>
                    </div>
                    <div class="operation flex flex-ai-c flex-wrap">
                        <button class="btn-white-blue" @click="onBatchApplyEle">
                            <i class="el-icon el-icon-document" />生成子弹回单
                        </button>
                        <button class="btn-white-green" @click="onBatchDownloadEle">
                            <i class="el-icon el-icon-download" />下载子弹回单
                        </button>
                        <!-- disabled -->
                        <!--                        <el-button style="background:#1989FA;color:#fff;" @click="onDetailExport"-->
                        <!--                            :disabled="selects.length === 0">-->
                        <!--                            <i class="el-icon el-icon-upload2" />导出明细-->
                        <!--                        </el-button>-->
                        <export-button @export="onDetailExport" :disabled="selects.length === 0">
                            导出明细
                        </export-button>

                        <!--                        <button class="btn" @click="onExport">-->
                        <!--                            <i class="el-icon el-icon-upload2" />导出列表-->
                        <!--                        </button>-->
                        <export-button @export="onExport">
                            导出列表
                        </export-button>
                        <!-- isOpenPaySalary -->
                        <button :class="['btn', 'btn-green', accountExpireInfoStatus === 3 ? 'btn-active' : '']"
                            @click="isBatchPay = true" :disabled="accountExpireInfoStatus === 3">
                            <!-- <el-icon><CreditCard /></el-icon> -->
                            <i class="el-icon el-icon-bank-card" />批量发薪
                        </button>
                    </div>
                </div>
                <div class="table">
                    <el-table :data="tableData" style="width: 100%" :header-row-style="{ color: '#202536' }"
                        :row-style="{ color: '#5E617D' }" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" />
                        <el-table-column prop="serveCompanyName" label="派遣单位名称" width="160" />
                        <el-table-column prop="projectName" label="项目名" />
                        <el-table-column prop="remarks" label="发薪备注" />
                        <el-table-column prop="peopleNum" label="发薪人数" />
                        <el-table-column prop="totalMoney" label="发薪金额"
                            :formatter="(row: { totalMoney: string }) => row.totalMoney + '元'" />
                        <el-table-column prop="totalMoney" label="停止发薪金额"
                            :formatter="(row: { payStopTotalMoney: string }) => row.payStopTotalMoney + '元'" />
                        <el-table-column prop="totalMoney" label="实发金额"
                            :formatter="(row: { payRealHairTotalMoney: string }) => row.payRealHairTotalMoney + '元'" />
                        <el-table-column prop="createTime" label="发薪日期" width="160" />
                        <el-table-column prop="createUserName" label="提交人" />
                        <el-table-column prop="status" label="审批状态">
                            <template #default="scope">
                                <p class="link" @click="onIsApprovalPopup(scope.row.id, scope.row.isShow)">
                                    <span>{{ scope.row.status }}</span>
                                </p>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="回单状态">
                            <template #default="scope">
                                <p class="link" v-if="scope.row.isCreateReceipt === 1"
                                    @click="openUrl(scope.row.receiptUrl)">
                                    <span>已生成</span><br />
                                    <span>点击下载</span>
                                </p>
                                <p class="link red" v-if="scope.row.isCreateReceipt === 3"
                                    @click="onApplyEle(scope.row.id)">
                                    <span>已过期</span><br />
                                    <span>点击生成</span>
                                </p>
                                <p class="link yellow" v-if="scope.row.isCreateReceipt === 0 &&
                                    scope.row.state === 1
                                " @click="onApplyEle(scope.row.id)">
                                    <span>未生成</span><br />
                                    <span>点击生成</span>
                                </p>
                                <p v-if="scope.row.state !== 1">不可生成</p>
                                <p v-if="scope.row.isCreateReceipt === 2">
                                    生成中
                                </p>
                            </template>
                        </el-table-column>
                        <el-table-column label="发薪明细">
                            <template #default="scope">
                                <p class="link" @click="
                                    $router.push({
                                        path: '/pay/detail/' + scope.row.id
                                    })
                                    ">
                                    查看详情
                                </p>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination class="pagination" v-model:currentPage="pageNum" v-model:page-size="pageSize"
                        :page-sizes="[10, 30, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                        @size-change="handleCurrentChange" @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </el-tab-pane>
            <el-tab-pane label="未领薪人员" name="not">
                <div class="header">
                    <div class="detail">
                        <span class="detail-key">未领薪人次：</span>
                        <span class="detail-value">{{ payUnclaimedCount }}人</span>
                        <span class="detail-key">未领薪金额：</span>
                        <span class="detail-value">￥{{ payUnclaimedTotalMoney }}</span>
                    </div>
                    <div class="search">
                        <el-select v-model="payType" filterable placeholder="筛选领薪状态" class="screen-i">
                            <el-option :label="item.dictLabel" :value="item.dictValue"
                                v-for="(item, index) in payTypeList" v-bind:key="index">{{ item.dictLabel }}</el-option>
                        </el-select>
                        <input type="text" placeholder="请输入人员名称" class="input search-input" v-model="searchText2"
                            @keydown.enter="search2" />
                        <button class="btn" @click="search2">搜索</button>
                        <button class="btn-white" @click="onReset2">
                            重置
                        </button>
                    </div>
                </div>
                <div class="table">
                    <el-table :data="tableData2" style="width: 100%" :header-row-style="{ color: '#202536' }"
                        :row-style="{ color: '#5E617D' }">
                        <el-table-column prop="userName" width="80" label="员工姓名" />
                        <el-table-column prop="idCardNo" label="身份证号" />
                        <el-table-column prop="serveCompanyName" label="派遣单位名" />
                        <el-table-column prop="projectName" label="项目名" />
                        <el-table-column prop="phone" label="手机号" />
                        <el-table-column width="80"
                            :formatter="(row: { paymentAmount: string }) => row.paymentAmount + '元'" label="发薪金额" />
                        <el-table-column width="160" prop="payTime" label="发薪时间" />
                        <el-table-column prop="statusMsg" width="90" label="领薪状态" />
                        <el-table-column label="操作" width="100">
                            <template #default="scope">
                                <p class="link" @click="stopPay(scope.row.id)">
                                    停止发薪
                                </p>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination class="pagination" v-model:currentPage="pageNum2" :page-sizes="[10, 30, 50, 100]"
                        v-model:page-size="pageSize2" layout="total, sizes, prev, pager, next, jumper" :total="total2"
                        @size-change="handleSizeChange2" @current-change="handleCurrentChange2">
                    </el-pagination>
                </div>
            </el-tab-pane>
        </el-tabs>
        <batchPay v-if="isBatchPay" @close="isBatchPay = false" @complete="handleCurrentChange" isType="pay" />
        <!-- isApprovalPopup -->
        <alertBox data-title="审批状态" close="x" @close="onCloseApproval" v-if="isApprovalPopup">
            <div class="approval-box">
                <div class="timeline-box">
                    <el-timeline>
                        <el-timeline-item color='#1989FA'>
                            <div class="row">
                                <div>
                                    <div class="row">
                                        <div class="user-name">{{ approvalInfo.createUserName }}</div>
                                        <div class="user-occupation">{{ approvalInfo.position }}</div>
                                    </div>
                                    <div class="user-remarks">
                                        备注：{{ approvalInfo.remarks || '暂无备注' }}
                                    </div>
                                </div>
                                <div class="submit-time">
                                    <div class="time">{{ approvalInfo.createTime }}</div>
                                    <!-- submit-orange -->
                                    <div class="submit-status">提交人</div>
                                </div>
                            </div>
                        </el-timeline-item>
                        <el-timeline-item color='#1989FA' v-for="(item, index) in approvalInfo.approveDetails"
                            :key="index">
                            <div>
                                <div class="row row-active-top">
                                    <div>
                                        <div class="align-items">
                                            <div class="user-name">{{ item.userName }}</div>
                                            <div class="user-occupation">{{ item.position }}</div>
                                        </div>
                                        <div class="user-remarks">
                                            {{ item.auditContent ? '备注：' + item.auditContent : '' }}
                                        </div>
                                        <div
                                            v-if="!item.createTime && (userId === item.userId) && (approvalInfo.flow === item.approverSeq) && !approvalInfo.isEnd">
                                            <div>
                                                <div class="align-items ">
                                                    <div>是否同意：</div>
                                                    <div>
                                                        <el-radio-group v-model="approvalRadio" class="ml-4">
                                                            <el-radio label="1" size="large">同意</el-radio>
                                                            <el-radio label="2" size="large">驳回</el-radio>
                                                        </el-radio-group>
                                                    </div>
                                                </div>
                                                <div class="align-items" style="align-items:flex-start;">
                                                    <div>审核备注：</div>
                                                    <div>
                                                        <el-input placeholder="请输入审核备注" style="width:300px" :rows="3"
                                                            v-model="textArea" type="textarea" />
                                                    </div>
                                                </div>
                                            </div>
                                            <div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="submit-time">
                                        <div class="time">{{ item.createTime || '未审核' }}</div>
                                        <div
                                            :class="[item.state === 1 ? 'submit-green' : item.state === 2 ? 'submit-orange' : '', submit - status]">
                                            {{ (item.state === 1 ? '已通过' : (item.state === 2 ? '已拒绝' : '')) }}</div>
                                    </div>
                                </div>
                                <div class="tips-box"
                                    v-if="approvalInfo.isEnd && (approvalInfo.approveDetails.length - 1 === index)">
                                    <el-alert title="提示：为保护账户安全，请您去手机端审批！" :closable="false" type="error" show-icon />
                                </div>
                            </div>
                        </el-timeline-item>
                    </el-timeline>
                </div>
                <div class="btn-popup-box" v-if="approvalInfo.state === 0 && userId === approvalInfo.createUserId">
                    <button class="mini-btn" @click="onCancelApply">取消申请</button>
                </div>
                <div class="btn-popup-box" v-if="approvalInfo.state === 4 && !approvalInfo.isEnd">
                    <div>
                        <button class="btn-white mini-btn mini-btn-white" @click="onCloseApproval">取消</button>
                        <button class="mini-btn mini-btn-active" @click="onDefineApproval">确认</button>
                    </div>
                </div>
            </div>
        </alertBox>
        <dialogPayExpire v-model:show="showExpireDialog" :type="expireType" :date="expireDate" />
    </div>
</template>

<script lang="ts">
import alertBox from '@/components/alert-box.vue'
import axios from 'axios'
import { defineComponent } from 'vue'
import {
    getProcessOrder,
    ProcessOrderDto,
    getNotGetPeople,
    NotGetPeopleDto,
    screeningPeople,
    payScreenType,
    getApprovalProcess,
    approval
} from '@/api/pay'
import {
    stopPay,
    batchApplyEle,
    batchDownloadEle,
    applyEle
} from '@/api/operation'
import { exportProcessDetailOrder, exportProcessOrder } from '@/api/export'
import { shortcuts } from '@/utils/global'
import batchPay from '@/components/batch-pay.vue'
import { dateFormat, confirm, downLoadFile } from '@/utils/util'
import user from '../utils/user'
import store from '@/store/index'
import dayjs from 'dayjs'

import dialogPayExpire from '@/components/dialog-pay-expire.vue'
export default defineComponent({
    name: 'Pay',
    components: {
        batchPay,
        alertBox,
        dialogPayExpire
    },
    data() {
        return {
            approvalIndex: '' as number | string,
            approvalList: ['进行中', '已通过', '已驳回', '已取消', '待我审批', '我参与的', '全部'], // 审批状态列表
            userId: 0,
            accountExpireInfoStatus: 0,
            tab: 'all' as string | string[],
            total: 0,
            total2: 0,
            payUnclaimedTotalMoney: 0,
            payUnclaimedCount: 0,
            pageNum: 1,
            pageSize: 10,
            pageNum2: 1,
            pageSize2: 10,
            searchType: 0,
            searchValue: '',
            searchValue2: '',
            searchText: '',
            searchText2: '',
            tableData: [] as ProcessOrderDto[],
            tableData2: [] as NotGetPeopleDto[],
            shortcuts: shortcuts,
            payDateSolt: '',
            selects: [] as string[],
            isBatchPay: false,
            deliverPeople: '',
            screeningPeopleList: [] as string[],
            payTypeList: [] as { dictLabel: string; dictValue: string }[],
            payType: '' as string | number,
            isApprovalPopup: false,
            textArea: '',
            approvalInfo: {} as any,
            approvalId: '',
            approvalRadio: 0,
            showExpireDialog: false,
            expireType: 'willExpire',
            expireDate: ''
        }
    },
    mounted() {
        this.showDialog()
    },
    created() {
        this.handleCurrentChange()
        this.handleCurrentChange2()
        this.screeningPeople()
        this.getPayScreenType()
        user.waitLogin().then(() => {
            this.userId = user.userId
            this.accountExpireInfoStatus = user.accountExpireInfoStatus
            console.log(this.accountExpireInfoStatus, user.accountExpireInfoStatus, '调用啦')
        })
    },
    activated() {
        if (this.$route.params.type) {
            this.tab = this.$route.params.type
        } else {
            this.tab = 'all'
        }
        this.showDialog()
    },
    methods: {
        showDialog() {
            let accountExpireTime = sessionStorage.getItem('accountExpireTime')
            if (accountExpireTime) {
                const today = dayjs().format('YYYY-MM-DD')
                const willExpireDate = dayjs(accountExpireTime).subtract(30, 'day').format('YYYY-MM-DD')
                console.log(today, willExpireDate, accountExpireTime)
                if (today > willExpireDate && today <= accountExpireTime) {
                    console.log('即将过期')
                    this.expireType = 'willExpire'
                    this.expireDate = accountExpireTime
                    if (sessionStorage.getItem('closeExpireDialog') !== 'true') {
                        this.showExpireDialog = true
                    }
                } else if (today > accountExpireTime) {
                    console.log('已过期')
                    this.expireType = 'expired'
                    if (sessionStorage.getItem('closeExpireDialog') !== 'true') {
                        this.showExpireDialog = true
                    }
                }
            }
        },
        // 取消申请
        onCancelApply() {
            confirm('', '确认取消审批吗').then(async () => {
                await this.onApproval()
                this.textArea = ''
                this.$message.success('取消审批成功')
                await this.handleCurrentChange()
                this.isApprovalPopup = false
            })
        },
        // 关闭审批流弹窗
        onClose() {
            this.isApprovalPopup = false
        },
        async onDefineApproval() {
            if (!this.approvalRadio) {
                this.$message.error('请至少选择一个')
                return
            }
            if (Number(this.approvalRadio) === 2 && !this.textArea) {
                this.$message.error('请输入驳回原因')
            }
            await this.onApproval()
            this.textArea = ''
            await this.handleCurrentChange()
            this.isApprovalPopup = false
            if (Number(this.approvalRadio) === 1) {
                this.$message.success('审批成功')
            } else {
                this.$message.success('驳回成功')
            }
        },
        // 审批
        async onApproval() {
            console.log(this.textArea, 'textAreatextArea')
            await approval({
                serveCompanyId: this.approvalInfo.serveCompanyId,
                id: Number(this.approvalId),
                params: {
                    isAgree: this.approvalRadio,
                    auditContent: this.textArea || (Number(this.approvalRadio) === 1 ? '同意' : Number(this.approvalRadio) === 2 ? '驳回' : '')
                }
            })
            console.log(this.approvalRadio, '点击啦')
        },
        // 取消审批
        onCloseApproval() {
            this.onClose()
            this.approvalRadio = 0
        },
        async onIsApprovalPopup(id: string, show: string) {
            if (!show) {
                this.$message.error('当前审批单无需您审批')
                return
            }
            console.log(id, 'idd')
            this.approvalId = id
            this.isApprovalPopup = true
            await this.getApprovalProcess()
        },
        // 获取审批流列表
        async getApprovalProcess() {
            const result = await getApprovalProcess({
                id: Number(this.approvalId)
            })
            this.approvalInfo = result
        },
        // 获取筛选人列表
        async screeningPeople() {
            const result = await screeningPeople()
            this.screeningPeopleList = result
        },
        handleCurrentChange() {
            getProcessOrder({
                beginCreateTime: this.payDateSolt
                    ? dateFormat('YYYY-mm-dd', new Date(this.payDateSolt[0]))
                    : '',
                endCreateTime: this.payDateSolt
                    ? dateFormat('YYYY-mm-dd', new Date(this.payDateSolt[1]))
                    : '',
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                remarks: this.searchType ? this.searchValue : '',
                searchText: this.searchType ? '' : this.searchValue,
                createUserName: this.deliverPeople,
                state: Number(this.approvalIndex) === 6 ? null : this.approvalIndex
            }).then(res => {
                this.total = res.total
                this.tableData = res.list
            })
        },
        handleCurrentChange2() {
            getNotGetPeople({
                pageNum: this.pageNum2,
                pageSize: this.pageSize2,
                searchText: this.searchValue2,
                status: this.payType === 'ALL' ? '' : (this.payType || '')
            }).then(res => {
                this.tableData2 = res.list
                this.total2 = res.totalCount
                this.payUnclaimedCount = res.payUnclaimedCount
                this.payUnclaimedTotalMoney = res.payUnclaimedTotalMoney
            })
        },
        handleSizeChange() {
            this.pageNum = 1
            this.handleCurrentChange()
        },
        handleSizeChange2() {
            this.pageNum2 = 1
            this.handleCurrentChange2()
        },
        search() {
            this.searchValue = this.searchText
            this.pageNum = 1
            this.handleCurrentChange()
        },
        search2() {
            this.searchValue2 = this.searchText2
            this.pageNum2 = 1
            this.handleCurrentChange2()
        },
        onReset() {
            this.searchText = ''
            this.deliverPeople = ''
            this.searchValue = ''
            this.search()
        },
        onReset2() {
            this.searchText2 = ''
            this.searchValue2 = ''
            this.search2()
        },
        onMonth() {
            this.handleCurrentChange()
        },
        async stopPay(id: string) {
            await stopPay(id)
            this.$message.success('停止发薪成功！')
            this.handleCurrentChange2()
        },
        handleSelectionChange(selects: { id: string }[]) {
            this.selects = selects.map(item => item.id)
        },
        // 导出详情页里的数据
        async onDetailExport() {
            const result = await exportProcessDetailOrder(
                this.selects.join(','),
                {
                    loading: true
                }
            )
            console.log(result, '导出信息')
            if (!result.fileUrl && result.exportStatus === 0) {
                store.commit('getLongPollingFile', result)
            } else {
                axios({
                    url: result.fileUrl,
                    method: 'GET',
                    responseType: 'blob'
                }).then(async (response) => {
                    await downLoadFile(response, result.exportType, result.updateTime, result.remark)
                    await this.$message.success('导出成功！')
                })
            }
            // if (result.fileUrl) {
            //     window.location.href = result.fileUrl
            //     this.$message.success('导出成功！')
            // } else {
            //     store.commit('getLongPollingFile', result)
            // }
        },
        // 导出当前页的数据
        async onExport() {
            console.log(this.selects.join(','), 'selects')
            const result = await exportProcessOrder({
                beginCreateTime: this.payDateSolt
                    ? dateFormat('YYYY-mm-dd', new Date(this.payDateSolt[0]))
                    : '',
                endCreateTime: this.payDateSolt
                    ? dateFormat('YYYY-mm-dd', new Date(this.payDateSolt[1]))
                    : '',
                remarks: this.searchType ? this.searchValue : '',
                searchText: this.searchType ? '' : this.searchValue,
                createUserName: this.deliverPeople,
                ids: this.selects.join(',')
            }, {
                loading: true
            })
            if (!result.fileUrl && result.exportStatus === 0) {
                store.commit('getLongPollingFile', result)
            } else {
                axios({
                    url: result.fileUrl,
                    method: 'GET',
                    responseType: 'blob'
                }).then(async (response) => {
                    await downLoadFile(response, result.exportType, result.updateTime, result.remark)
                    await this.$message.success('导出成功！')
                })
            }
            console.log(result, 'result')
            // window.location.href =
            //     process.env.VUE_APP_BASE_URL +
            //     '/common/download?delete=true&fileName=' +
            //     result

            // this.$message.success('导出成功！')
        },
        async onBatchApplyEle() {
            await batchApplyEle({
                beginCreateTime: this.payDateSolt
                    ? dateFormat('YYYY-mm-dd', new Date(this.payDateSolt[0]))
                    : '',
                endCreateTime: this.payDateSolt
                    ? dateFormat('YYYY-mm-dd', new Date(this.payDateSolt[1]))
                    : '',
                searchText: this.searchValue,
                ids: this.selects.join(','),
                createUserName: this.deliverPeople
            })
            this.$message.success('批量申请成功！')
            this.handleCurrentChange()
        },
        async onBatchDownloadEle() {
            if (this.selects.length === 0) {
                this.$message.error('请至少选择一条')
                return
            }
            const result = await batchDownloadEle({
                beginCreateTime: this.payDateSolt
                    ? dateFormat('YYYY-mm-dd', new Date(this.payDateSolt[0]))
                    : '',
                endCreateTime: this.payDateSolt
                    ? dateFormat('YYYY-mm-dd', new Date(this.payDateSolt[1]))
                    : '',
                searchText: this.searchValue,
                ids: this.selects.join(',')
            })
            window.location.href =
                process.env.VUE_APP_BASE_URL +
                '/common/downloadZip?delete=true&uuid=' +
                result

            this.$message.success('导出成功！')
        },
        async onApplyEle(id: string) {
            await applyEle(id)
            this.$message.success('回单申请成功！')
            this.handleCurrentChange()
        },
        openUrl(url: string) {
            window.location.href = url
            this.$message.success('导出成功！')
        },
        // 未领薪人员 下拉筛选
        getPayScreenType() {
            payScreenType('saas-pay-get-status').then(res => {
                console.log(res, 'res')
                res.splice(1, 1)
                this.payTypeList = res
                console.log(this.payTypeList, 'payTypeList')
            })
        },
        onPayScreenType(event: number) {
            console.log(event, 'event')
            this.payType = event
            this.handleCurrentChange2()
        }
    }
})
</script>

<style lang="stylus" scoped>
table()
.block
    padding: 10px 24px 0;
:deep().date-solt
    width 241px
    margin-right 20px
.operation
    button
        width 113px
        height 40px
        margin-left 20px

:deep().el-tabs__header.is-top
    display inline-block
:deep().el-tabs__nav-scroll
    padding-right 20px
.container.block
    position relative
.postion-top
    position absolute
    right 6px
    top 16px
.header
    margin-top 10px

.operation .btn-white-blue,.operation .btn-white-green
    width 120px

.link.red
    color color-red
.link.yellow
    color color-yellow
.btn-Export
    background color-blue
    width 180px
    margin-left 10px
    color #fff
.screen-i
    width 135px
    margin-right 16px
.search-type
    width 100px
    margin-right 8px
.btn-active
    background #ccc
.approval-box
    padding 60px
    height 500px
.timeline-box
    padding-bottom 60px
.user-name
    font-size 16px
    font-weight 500
    margin-right 8px
.user-occupation
    font-size 14px
    color #9497B1
.user-remarks
    font-size 14px
    color #9497B1
    margin-top 8px
.submit-time
    text-align right
    color #9497B1
    font-size 14px
    .submit-orange
        color #FF7E68
    .submit-green
        color #00D679
    .submit-status{
        font-size 16px
    }
.row-active-top
    align-items flex-start
    min-height 80px
.tips-box
    margin-top 8px
    width 100%
.btn-popup-box
    display flex
    align-items center
    justify-content center
    position fixed
    bottom 0
    margin 185px auto
    width 800px
.mini-btn-active
    margin-left 16px
.mini-btn-white
    background #ffffff

</style>
